<template>
  <div class="app-container">
    <el-card>
      <el-form :model="billForm" :inline="true" label-width="68px">
        <el-form-item label="时间">
          <el-date-picker clearable v-model="timeList" type="datetimerange" range-separator="~"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="仓库" prop="stoId">
          <el-select v-model="billForm.stoId " placeholder="请选择仓库" clearable :style="{ width: '100%' }"
                     filterable @change="getWareHouse">
            <el-option v-for="item in warehousesList" :key="item.stoId" :label="item.stoName"
                       :value="item.stoId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="单据号">
          <el-input v-model="billForm.billsId" placeholder="请输入单据号（模糊检索）" clearable></el-input>
        </el-form-item>
        <el-form-item label="单据类型">
          <el-select v-model="billForm.billsMode " placeholder="请选择单据类型" clearable :style="{ width: '100%' }"
                     filterable @change="getType">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="操作人">
          <el-input v-model="billForm.userName" placeholder="请输入操作人" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="queryList">查询</el-button>
          <el-button type="danger" icon="el-icon-refresh" @click="clearAll">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="billsList" border height="605px" id="data-table">
        <el-table-column label="日期" align="center" prop="CheckTime"></el-table-column>
        <el-table-column label="单据号" align="center" prop="BillsID"></el-table-column>
        <el-table-column label="仓库名称" align="center" prop="sto_name"></el-table-column>
        <el-table-column label="单据类型" align="center" prop="BillsType"></el-table-column>
        <el-table-column label="操作人" align="center" prop="CheckUser"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="cancel(scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize"
                     :page-sizes="[100, 150, 200, 500]" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import {
  queryPdaBillsCheckList,//列表
  cancelCheck,//取消单据
} from "@/api/wareHouse/billsComfirm";
import {
  queryWarehouseList,//获取仓库列表
} from "@/api/report/yxl.js";
export default {
  name: 'billsComfirm',
  data() {
    return {
      billsList:[],
      total:0,
      pageNum: 1,
      pageSize: 100,
      warehousesList: [],
      billForm:{
        stoId:'',
        userName:''
      },
      timeList:[this.getDefaultStartDate(), this.getDefaultEndDate()],
      typeList: [{label: '入库', value: 2}, {label: '出库', value: 0}],
    }
  },
  mounted() {
    this.queryList();//查看列表
    this.getData();//获取仓库
  },
  methods: {
    //取消单据
    cancel(row){
      let params = {
        id:row.ID,
        billsId:row.BillsID,
      }
      this.$confirm(`确认要取消此项任务吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelCheck(params).then(res => {
          this.$message({
            type: 'success',
            message: `取消成功!` // 根据操作状态来动态显示消息
          });
          this.queryList();
        }).catch(error => {
          // 错误处理
          this.$message({
            type: 'error',
            message: `操作失败: ${error.message || '未知错误'}` // 显示错误消息
          });
        });
      }).catch(() => {
        // 用户取消了操作
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    //切换类型
    getType(val) {
      this.billForm.billsMode = val;
      this.queryList();
    },
    /** 查询列表 */
    queryList() {
      if (this.timeList && this.timeList[0]) {
        this.billForm.startDate = this.timeList[0];
      } else {
        delete this.billForm.startDate; // 如果时间为空，则删除该字段
      }
      if (this.timeList && this.timeList[1]) {
        this.billForm.endDate = this.timeList[1];
      } else {
        delete this.billForm.endDate; // 如果时间为空，则删除该字段
      }
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.billForm
      }
      queryPdaBillsCheckList(params).then(res => {
        this.billsList = res.data.rows;
        this.total = res.data.total;
      })
    },
    //重置
    clearAll(){
      this.timeList = [this.getDefaultStartDate(), this.getDefaultEndDate()];
      this.billForm = {
        stoId:'',
        userName:''
      }
      this.queryList();
    },
    //分页
    handleSizeChange(newsize) {
      this.pageNum = 1;
      this.pageSize = newsize;
      this.queryList();
    },
    handleCurrentChange(newpage) {
      this.pageNum = newpage;
      this.queryList();
    },
    //初始化基础数据
    getData() {
      queryWarehouseList().then(res => {
        this.warehousesList = res.data
      }).catch(error => {
        this.$message.error('获取仓库数据失败:', error);
      });
    },
    //获取日期
    getDefaultStartDate() {
      const date = new Date()
      date.setMonth(date.getMonth() - 1)
      return this.formatDate(date)
    },
    getDefaultEndDate() {
      return this.formatDate(new Date())
    },
    //格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    //切换仓库
    getWareHouse(val) {
      this.billForm.stoId = val;
      this.queryList();
    },
  },
}

</script>
<style scoped>
.app-container {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.el-pagination {
  float: right;
  margin: 20px;
}
</style>
